<template>
  <div>
     <!-- 文件下载、上传 -->
    <el-dialog title="组织导入" :visible.sync="dialogFile" @close='closeGetFlieDialog'>
      <ul class="fileUpload">
        <li><span>导入模板：</span><span> <el-button type="danger" style='width:240px' size="small" @click="downloadFile">点击下载导入模板</el-button></span></li>
        <li><span>组织信息表：</span><span style="position:relative">
           <el-input style="width:240px;height:20px;" v-model="fileName" size="small" readonly placeholder="请选择（仅支持.xls/.xlsx格式文件）"></el-input>
           <el-upload style="display:inline-block;position:absolute;left:260px;height:30px" ref="upload"
            name="orgBatchImport"
            id="orgBatchImport"
            :action="importUrl"
            accept='.xls,.xlsx'
            :multiple="false"
            :limit=1
            :show-file-list="false"
            :before-upload="beforeLoad"
            :on-success="successRes"
            :on-error="errorRes"
            :auto-upload="false"
            :data="formData"
            :on-change="fileChecked"
            :on-progress="isUpdata"
            :headers="headerToken"
           >
            <el-button size="small" type="danger">选择文件</el-button>
           </el-upload>
          </span></li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleBtn">取 消</el-button>
        <el-button type="primary" @click="submitLoadFile">导 入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Loading} from 'element-ui'
export default {
  name: 'fileuploadDialo',
  props:{
    showUploadDialog:{},
    importUrl:''
  },
  data: function() {	
    return {
      fileName:'',
      dialogFile:false,
      formData:{},  //文件导入的其他参数
      headerToken:{}
    }
  },
  mounted(){
    this.headerToken = {
        token:localStorage['token']
      }
  },
  methods: {
    //下载模板文件
      downloadFile(){
        window.location.href = '../../../static/tmpFile/batchImport.xlsx'
      },
      //选择文件后
      fileChecked(file,fileList){
        if(fileList.length > 1){
          fileList.splice(0,1)
        };
        this.fileName = file.name;
      },
      //上传之前的校验
      beforeLoad(file){
        const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
          || file.type === 'application/vnd.ms-excel';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if(!isExcel){
          this.$alert('上传文件必须为excel格式', '提示', {
            type:'info',
            confirmButtonText: '确定',
            showClose:false}).then(function(){return });
        };
        if(!isLt5M){
          this.$alert('上传文件大小不能超过5M', '提示', {
            type:'info',
            confirmButtonText: '确定',
            showClose:false}).then(function(){return});
        }
        return isExcel && isLt5M ;
      },
      //确认导入
      submitLoadFile(){
        this.$refs.upload.submit();
        this.$emit('listUploadFile',this.formData,this.dialogFile)
      },
      closeGetFlieDialog(){
        this.$emit('closeGetFlieDialog',this.dialogFile)
      },
      //上传成功
      successRes(res){
        console.log(res)
        this.dataUp.close();
        if(res.code == 0){
          this.dialogFile = false;
        }
        this.$notify({
            title: '提示',
            message: res.msg,
            duration: 3000,
            type: 'success'
          });
      },
      //上传失败
      errorRes(res){
        console.log(res)
        this.dataUp.close();
        this.$notify({
          title: '提示',
          message: res.msg,
          duration: 3000,
          type: 'warning'
        });
      },
      //上传加载loading
      isUpdata(event,file){
        this.dataUp = Loading.service({fullscreen:true})
      },
      cancleBtn(){
        this.dialogFile = false;
        this.$emit('listUploadFile',this.formData,this.dialogFile)
      }
  },
  watch:{
    showUploadDialog:function(val,oldVal){
        this.dialogFile = this.showUploadDialog;
    }
  }
}
</script>

<style scoped>
  .fileUpload li{
    height: 46px;
  }
  .fileUpload li>span:first-child{
    display:inline-block;
    width: 130px;
    text-align: right;
  }
</style>